<script setup>
import lineEdge from './lineEdge.vue'
import Columnar from './columnar.vue'
import Columnar1 from './columnar1.vue'
import MonthBad from './monthBad.vue'
import TeamGoodProducts from './teamGoodProducts.vue'

import {
  GetWorkshopInfoAPI,
  GetLineStockInfoAPI,
  GetEquipmentOperationAPI,
  GetManufacturingOrderAPI,
  GetToBeOnlineAPI,
  GetTeamGoodProductsAPI,
  GetTeamsMonthOutputAPI,
  GetProductionContrastAPI,
  GetMonthBadAPI
} from '@/api/statement/production.js'
import { nextTick, reactive } from 'vue'

const query = reactive({
  lineCode: 'SC-01'
})

// 车间信息 ============================
const workshop = reactive({
  loading: false,
  workshopName: '',
  lineName: '',
  groupName: '',
  groupMonitorName: '',
  groupCount: '',
  groupPhoto: ''
})
const getShop = async () => {
  try {
    workshop.loading = true
    const result = await GetWorkshopInfoAPI(query)
    Object.keys(result.data).forEach(itemKey => (workshop[itemKey] = result.data[itemKey]))
  } catch (err) {
  } finally {
    workshop.loading = false
  }
}

// 线边库存情况 ============================
const lineStockInfo = reactive({
  loading: false,
  data: []
})
const getLineStockInfo = async () => {
  try {
    lineStockInfo.loading = true
    const { data: result } = await GetLineStockInfoAPI(query)

    lineStockInfo.data = result.map(item => ({
      name: item.materialType,
      value: Number(item.materialWeight)
    }))
  } catch (err) {
  } finally {
    lineStockInfo.loading = false
  }
}

// 线边库存情况 ============================
const equipmentOperation = reactive({
  loading: false,
  data: ''
})
const getEquipmentOperation = async () => {
  try {
    equipmentOperation.loading = true
    const { data: result } = await GetEquipmentOperationAPI(query)
    equipmentOperation.data = result.map(item => ({
      name: item.equipmentOperationStatus,
      value: Number(item.count)
    }))
  } catch (err) {
  } finally {
    equipmentOperation.loading = false
  }
}

// 制令单号 ============================
const manufacturingOrder = reactive({
  loading: false,
  data: ''
})
const getManufacturingOrder = async () => {
  try {
    manufacturingOrder.loading = true
    const { data: result } = await GetManufacturingOrderAPI(query)
    Object.keys(result).forEach(itemKey => (manufacturingOrder[itemKey] = result[itemKey]))

    // 计算百分比
    const progressResult = (Number(result.actualWeight) / Number(result.planWeight)) * 100
    const progress = progressResult > 100 ? 100 : progressResult
    manufacturingOrder.progress = Math.ceil(progress)
  } catch (err) {
  } finally {
    manufacturingOrder.loading = false
  }
}

// 待上线制令单 ============================

// 48小时轮播表
const toBeonline = reactive({
  header: ['制令单号', '物料编码', '物料编码', '计划产量', '预计开工时间'],
  data: [],
  align: ['center', 'center', 'center', 'center', 'center'],
  headerBGC: '#05112b',
  index: false, //序号
  rowNum: 5 //表行数
})
const getToBeOnline = async () => {
  toBeonline.data = []
  try {
    const { data: result } = await GetToBeOnlineAPI(query)
    result.forEach(item => {
      toBeonline.data.push([
        item.spunlaceOrderNumber,
        item.materialCode,
        item.materialName,
        item.planWeight,
        item.timeOfStart
      ])
    })
    // Object.keys(result).forEach(itemKey => (toBeonline[itemKey] = result[itemKey]))
  } catch (err) {
  } finally {
  }
}

// 班组近7天良品率(%) ============================
const teamGoodProduct = reactive({
  loading: false,
  xAxisData: [],
  yAxisData: []
})
// 班组近7天良品率(%) 折线图
const getTeamGoodProducts = async () => {
  try {
    teamGoodProduct.loading = true
    const { data: result } = await GetTeamGoodProductsAPI(query)
    teamGoodProduct.xAxisData = result.dateList
    // teamGoodProduct.yAxisData.push(result.yieldClassA.map(item => Number(item)))
    teamGoodProduct.yAxisData = result.list
  } catch (err) {
  } finally {
    teamGoodProduct.loading = false
  }
}

// 班组月产量统计(吨)
const teamsMonthOutput = reactive({
  loading: false,
  xAxisData: [],
  yAxisData: []
})
const getTeamsMonthOutput = async () => {
  try {
    teamsMonthOutput.loading = true
    const { data: result } = await GetTeamsMonthOutputAPI(query)
    teamsMonthOutput.xAxisData.push(...result.map(item => item.classes))
    teamsMonthOutput.yAxisData = result
  } catch (err) {
  } finally {
    teamsMonthOutput.loading = false
  }
}

// 产线产量统计对比(吨)
const productionContrast = reactive({
  loading: false,
  xAxisData: [],
  yAxisData: []
})
const getProductionContrast = async () => {
  try {
    productionContrast.loading = true
    const { data: result } = await GetProductionContrastAPI(query)
    productionContrast.xAxisData.push(...result.map(item => item.materialType))
    // 上月
    productionContrast.yAxisData = result
    // 本月
    // productionContrast.yAxisData.push(result.map(item => Number(item.monthWeight)))
  } catch (err) {
  } finally {
    productionContrast.loading = false
  }
}

// 线边库存情况 ============================
const monthBad = reactive({
  loading: false,
  data: []
})
const getMonthBad = async () => {
  try {
    monthBad.loading = true
    const { data: result } = await GetMonthBadAPI(query)

    monthBad.data = result.map(item => ({
      name: item.badName,
      value: Number(item.defectiveQuantity)
    }))
  } catch (err) {
  } finally {
    monthBad.loading = false
  }
}

const init = () => {
  getShop()
  getLineStockInfo()
  getEquipmentOperation()
  getManufacturingOrder()
  getToBeOnline()
  getTeamGoodProducts()
  getTeamsMonthOutput()
  getProductionContrast()
  getMonthBad()
}

const timer = ref(null)
timer.value = setInterval(() => {
  init()
}, 50000)

init()
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>
<template>
  <dv-full-screen-container class="box app-main">
    <div class="header">
      生产车间看板
      <img class="logo" src="../../../assets/logo/logo-03.png" />
    </div>
    <div class="main-box">
      <!-- 左侧 -->
      <div class="left">
        <dv-border-box7 class="mainItem" v-loading="workshop.loading">
          <div class="title">车间信息:</div>
          <div class="left-top">
            <div class="imageInfo">
              <img class="image" :src="workshop.groupPhoto" alt="" />
              <div class="info">
                <div>
                  <label>车间</label>
                  <span>:</span>
                  <span>{{ workshop.workshopName }}</span>
                </div>
                <div>
                  <label>产线</label>
                  <span>:</span>
                  <span>{{ workshop.lineName }}</span>
                </div>
                <div>
                  <label>当前班组</label>
                  <span>:</span>
                  <span>{{ workshop.groupName }}</span>
                </div>
                <div>
                  <label>班组长</label>
                  <span>:</span>
                  <span>{{ workshop.groupMonitorName }}</span>
                </div>
                <div>
                  <label>班组人员</label>
                  <span>:</span>
                  <span>{{ workshop.groupCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </dv-border-box7>
        <dv-border-box7 class="mainItem" v-loading="lineStockInfo.loading">
          <div class="title">线边库存情况</div>
          <lineEdge height="100%" :data="lineStockInfo.data" class="eacharts" />
        </dv-border-box7>
        <dv-border-box7 class="mainItem" v-loading="equipmentOperation.loading">
          <div class="title">设备运行状况</div>
          <lineEdge
            :loading="equipmentOperation.loading"
            height="100%"
            :data="equipmentOperation.data"
            class="eacharts"
          />
        </dv-border-box7>
      </div>
      <!-- 中间 -->
      <div class="main">
        <dv-border-box7 class="mainItem" v-loading="manufacturingOrder.loading">
          <div class="title">制令单号:{{ manufacturingOrder.spunlaceOrderNumber || '暂无信息' }}</div>
          <div class="mt10 materialTitle">
            物料编码：{{ manufacturingOrder.materialCode || '暂无信息' }} ({{
              manufacturingOrder.materialName || '暂无信息'
            }})
          </div>
          <!-- 产量 -->
          <div class="yieldItem-box">
            <div class="yieldItem">
              <div>计划产量</div>
              <div>{{ manufacturingOrder.planWeight || '暂无信息' }}</div>
            </div>
            <div class="yieldItem">
              <div>实际产量</div>
              <div>{{ manufacturingOrder.actualWeight || '暂无信息' }}</div>
            </div>
            <div class="yieldItem">
              <div>已生产数量</div>
              <div>{{ manufacturingOrder.productionCount || '暂无信息' }}</div>
            </div>
            <!-- 环形进度 -->
            <el-progress
              indeterminate
              type="circle"
              width="170"
              class="percent"
              :percentage="manufacturingOrder.progress || 0"
              show-text
              :stroke-width="15"
            >
            </el-progress>
          </div>
          <!-- 班次..... -->
          <div class="shift">
            <div class="shiftItem">
              <div class="shiftItem-title">
                本班次&nbsp;({{ manufacturingOrder.thisClass || '暂无信息' }})&nbsp;产量&nbsp; :{{
                  manufacturingOrder.productionThisShift || '暂无信息'
                }}
              </div>
              <div>
                上班次&nbsp;({{ manufacturingOrder.perClass || '暂无信息' }})&nbsp;产量&nbsp; :{{
                  manufacturingOrder.productionPerShift || '暂无信息'
                }}
              </div>
            </div>
            <div class="shiftItem">
              <div>甲班总产量&nbsp; &nbsp;:{{ manufacturingOrder.classA || '暂无信息' }}</div>
              <div>乙班总产量&nbsp; :&nbsp;{{ manufacturingOrder.classB || '暂无信息' }}</div>
            </div>
            <div class="shiftItem">
              <div class="shiftItem-title">
                预计工时&nbsp;(h):{{ manufacturingOrder.estimatedWorkingHours || '暂无信息' }}
              </div>
              <div class="shiftItem-title">
                生产时长&nbsp;(h):{{ manufacturingOrder.productionDuration || '暂无信息' }}
              </div>
            </div>
          </div>
        </dv-border-box7>
        <dv-border-box7 class="mainItem" v-loading="toBeonline.loading">
          <div class="title">待上线制令单:</div>
          <dv-scroll-board ref="tabConfigRef" :config="toBeonline" />
        </dv-border-box7>
        <dv-border-box7 class="mainItem" v-loading="teamGoodProduct.loading">
          <div class="title">班组近7天良品率(%):</div>
          <TeamGoodProducts
            width="100%"
            height="250px"
            :xAxisData="teamGoodProduct.xAxisData"
            :yAxisData="teamGoodProduct.yAxisData"
            class="eacharts"
          />
        </dv-border-box7>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <dv-border-box7 class="mainItem" v-loading="teamsMonthOutput.loading">
          <div class="title">班组月产量统计(吨):</div>
          <Columnar
            :tooltipShow="false"
            height="15.625rem"
            width="100%"
            :xh="false"
            :legendShow="false"
            position="top"
            :yAxisData="teamsMonthOutput.yAxisData"
            :xAxisData="teamsMonthOutput.xAxisData"
          />
        </dv-border-box7>
        <dv-border-box7 class="mainItem" v-loading="productionContrast.loading">
          <div class="title">产线产量统计对比(吨):</div>
          <Columnar
            :tooltipShow="false"
            height="15.625rem"
            width="100%"
            :xh="false"
            :stack="true"
            :legendShow="false"
            position="top"
            :yAxisData="productionContrast.yAxisData"
            :xAxisData="productionContrast.xAxisData"
          />
        </dv-border-box7>
        <dv-border-box7 class="mainItem" v-loading="monthBad.loading">
          <div class="title">本月品质不良分布:</div>
          <MonthBad height="100%" :data="monthBad.data" />
        </dv-border-box7>
      </div>
    </div>
    <div class="header">生产车间看板</div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
.header {
  position: relative;
  font-size: 2.85rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  height: 6rem;
  background-image: url(../../../assets/images/kb-header.png);
  background-size: cover;
  // background-position: 0 -1.875rem;

  img {
    position: absolute;
    left: 0;
    width: 20.25rem;
    height: 5.25rem;
  }
}

.box {
  color: #83b2dc;
  font-weight: 700;
  font-size: 1.125rem;
  background-color: #0e1d38;
  height: 100%;
  color: #86b0d7;
  padding-bottom: 1.875rem !important;
}

.main-box {
  display: flex;
  justify-content: center;
  height: 100%;

  // 左右侧布局
  .left,
  .right,
  .main {
    display: flex;
    flex-direction: column;
    flex: 0.5;
    margin: 0 0.9375rem;

    & .mainItem:nth-child(2) {
      margin: 0.9375rem 0;
    }
  }
  // 左侧布局
  .left {
    & .mainItem {
      height: 30%;
    }
    .left-top {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .imageInfo {
      display: flex;
      padding: 1.25rem;
      align-items: center;
      justify-content: space-around;
      overflow: hidden;
    }
    .imageInfo .image {
      width: 10.75rem;
      height: 15.25rem;
    }
    .imageInfo .info {
      margin-left: 0.9375rem /* 15/16 */;
      color: #83b2dc;
      font-weight: 700;
      font-size: 1.125rem;

      div {
        margin: 0.9375rem 0;
      }
      label {
        display: inline-block;
        width: 4.5rem;
        text-align: justify;
        text-align-last: justify;
      }
      span:nth-child(1) {
        display: inline-block;
        width: 6.25rem;
        text-align: left;
      }
    }
  }
  // 中间布局
  .main {
    flex: 1;
    margin: 0;
    height: 100%;
    & .mainItem {
      padding-left: 0.9375rem /* 15/16 */;
      height: 35%;
    }
    & .mainItem :nth-child(1) {
      // padding: 0.9375rem /* 15/16 */;
      // height: 35%;
    }
    & .mainItem:nth-child(2) {
      margin: 0.9375rem 0;
      height: 25%;
    }
    & .mainItem:nth-child(3) {
      height: 30%;
    }

    .main-top-box {
      display: flex;
    }
    .yieldItem-box {
      display: flex;
      align-items: center;
      height: 9.25rem;
      margin: 1.9375rem 0 /* 15/16 */;
      .yieldItem {
        width: 25% /* 200/16 */;
        height: 90% /* 100/16 */;
        border: 1px solid #727484;
        font-size: 1.5625rem /* 25/16 */;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-right: 0.9375rem /* 15/16 */;
      }
    }

    .shift {
      display: flex;
      div:nth-child(1) {
        margin-bottom: 0.9375rem /* 15/16 */;
      }
      .shiftItem {
        font-size: 1.3rem /* 25/16 */;
        margin-right: 1.9375rem /* 15/16 */;
      }
    }
    .progress {
      height: 12.5rem /* 200/16 */;
    }
  }
  // 右侧布局

  .right {
    & .mainItem {
      height: 30%;
      padding: 0.9375rem /* 15/16 */;
    }
    & .mainItem:nth-child(2) {
      margin: 0.9375rem 0;
    }
  }
}

.title {
  color: #1177c1;
  font-size: 1.225rem;
}

.mainItem-top {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 1.25rem 0 /* 20/16 */;
}
.mainItem-bottom {
  display: flex;
  flex-direction: row;
}

.shiftItem-title {
  color: #1177c1;
}

.materialTitle {
  font-size: 1.1875rem;
  height: 1.5625rem;
}

.percent {
  width: 12.5rem;
}
</style>
